<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>pytho万能分布式函数调度框架</title>
    <link href="{{ url_for('static',filename='css_cdn/twitter-bootstrap/3.3.7/css/bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static',filename='css_cdn/font-awesome/4.7.0/css/font-awesome.min.css') }}" rel="stylesheet">
    <link rel="stylesheet"
        href="{{ url_for('static',filename='css_cdn/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static',filename='assets/css/jquery.mCustomScrollbar.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static',filename='assets/css/custom.css') }}">

    <!-- 在其他 link 标签后添加 -->
    <link href="{{ url_for('static',filename='css_cdn/select2/4.0.13/css/select2.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static',filename='css/content_page_style.css') }}" rel="stylesheet">


    <script src="{{ url_for('static',filename='js/jquery-1.11.0.min.js') }}" type="text/javascript"></script>
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.0/jquery.min.js"></script> -->
    <!-- 在其他 script 标签后添加 -->
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/select2/4.0.13/js/select2.min.js"></script> -->
    <script src="{{ url_for('static',filename='/js/select2.min.js') }}"></script>
    <script src="{{ url_for('static',filename='js_cdn/bootstrap/3.3.7/js/bootstrap.min.js') }}"></script>


    <script src="{{ url_for('static',filename='js/moment-with-locales.min.js') }}"></script>
    <script src="{{ url_for('static',filename='js/bootstrap-datetimepicker.min.js') }}"></script>
    <!-- <script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script> -->
    <!-- <script type="text/javascript" src="https://cdn.bootcss.com/echarts/3.3.0/echarts.js"></script> -->
    <script type="text/javascript" src="{{ url_for('static',filename='js/echarts.min.js') }}"></script>

    <script src="{{ url_for('static',filename='assets/js/jquery.mCustomScrollbar.concat.min.js') }}"></script>
    <script src="{{ url_for('static',filename='assets/js/custom.js') }}"></script>

        
    <!-- 添加 Tabulator 样式和脚本 -->
    <link href="{{ url_for('static',filename='css_cdn/tabulator-tables@5.5.0/tabulator.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static',filename='css_cdn/tabulator-tables@5.5.0/tabulator_bootstrap3.min.css') }}" rel="stylesheet">
    <script type="text/javascript" src="{{ url_for('static',filename='js_cdn/tabulator-tables@5.5.0/dist/js/tabulator.min.js') }}"></script>

    <style>

    </style>
</head>

<body>

    <div class="container-fluid" style="margin-top: 5px;">
        <div style="margin-top: 5px;">
            <form class="form-inline" role="form" style="">
                <div class="form-group ">
                    <label for="col_name_search">队列名字：</label>
                    <select class="form-control" id="col_name_search">
                        <option value="">请选择队列名字...</option>
                    </select>
                </div>
                <button type="button" class="btn btn-default marginLeft20" onclick="query()">查询</button>
            </form>
        </div>

        <div id="result-table" style="margin-top: 20px;"></div>

    </div>






    <script>

        // 在现有的变量声明后添加
        var allQueues = [];  // 存储所有队列数据
        var currentColName;

        // 页面加载完成后立即获取所有队列
        $(document).ready(function () {
            $.ajax({
                url: "{{ url_for('hearbeat_info_partion_by_queue_name')}}",
                data: { col_name_search: '' },
                async: true,
                success: function (result) {
                    allQueues = result;
                    var html = '<option value="">请选择队列名字...</option>';
                    for (var item of result) {
                        html += '<option value="' + item.collection_name + '">' +
                            item.collection_name + '&nbsp;&nbsp;&nbsp;&nbsp;(consumer_count:' + item.count + ')</option>';
                    }
                    $("#col_name_search").html(html);

                    // 初始化选择框的搜索功能
                    $("#col_name_search").select2({
                        placeholder: "请输入队列名称搜索...",
                        allowClear: true,
                        width: '500px'
                    });

                    // 监听选择变化
                    $("#col_name_search").on('change', function () {
                        var selectedQueue = $(this).val();
                        console.log("Selected queue:", selectedQueue);
                        currentColName = selectedQueue;
                        // if(selectedQueue) {
                        //     queryResult(selectedQueue, 0, true);
                        // }
                    });
                }
            });
        });

        $(document).ready(function (){
            query()
        });

        function query() {
            $.ajax({
                url: "{{ url_for('hearbeat_info_by_queue_name')}}",
                data: { queue_name: currentColName },
                async: true,
                success: function (result) {
                    console.info(result);

                                      // 创建表格
                        var table = new Tabulator("#result-table", {
                        theme: "bootstrap3",
                        data: result,
                     
                         // layout: "fitColumns",
                         layout: "fitDataTable",  // 改为 fitDataTable
        responsiveLayout: false, // 禁用响应式布局
                        columns: [
                        {title: "<br><br>队列名称", field: "queue_name"},
                            {title: "<br><br>消费函数", field: "consuming_function"},
                            {title: "<br><br>主机名", field: "computer_name"},
                            {title: "<br><br>IP地址", field: "computer_ip"},
                            {title: "<br><br>进程ID", field: "process_id"},
                            {title: "<br><br>启动时间", field: "start_datetime_str","width":200},
                            {title: "<br><br>最近心跳时间", field: "hearbeat_datetime_str","width":200},
                            
                            {title:"近10秒<br>运行完成<br>消息个数",field:"last_x_s_execute_count", formatter:"html","width":100},
                            {title:"近10秒<br>运行失败<br>消息个数",field:"last_x_s_execute_count_fail", formatter:"html","width":100},
                            {title:"近10秒<br>函数运行<br>平均耗时",field:"last_x_s_avarage_function_spend_time", formatter:"html","width":100},
                            
                            {title:"累计<br>运行完成<br>消息个数",field:"total_consume_count_from_start", formatter:"html","width":100},
                            {title:"累计<br>运行失败<br>消息个数",field:"total_consume_count_from_start_fail", formatter:"html","width":100},
                            {title:"累计<br>函数运行<br>平均耗时",field:"avarage_function_spend_time_from_start", formatter:"html","width":100},

                            {title: "<br><br>代码文件", field: "code_filename"},
                            // {title: "<br><br>consumer_id", field: "consumer_id"},
                            {title: "<br><br>consumer_uuid", field: "consumer_uuid"},
                        ],
                        pagination: true,
                        paginationSize: 1000,
                        locale: true,
                        langs: {
                            "zh-cn": {
                                "pagination": {
                                    "first": "首页",
                                    "first_title": "首页",
                                    "last": "末页",
                                    "last_title": "末页",
                                    "prev": "上一页",
                                    "prev_title": "上一页",
                                    "next": "下一页",
                                    "next_title": "下一页",
                                }
                            }
                        }
                    });

                    /* result 例如 [
  {
    "code_filename": "d:/codes/funboost/test_frame/test_function_status_result_persist/test_persist.py", 
    "computer_ip": "10.0.133.57", 
    "computer_name": "LAPTOP-7V78BBO2", 
    "consumer_id": 1462882757512, 
    "consumer_uuid": "88f568f7-9723-48ef-9cac-0370b2333a49", 
    "consuming_function": "f2", 
    "hearbeat_datetime_str": "2025-02-25 17:28:36", 
    "hearbeat_timestamp": 1740475716.783474, 
    "process_id": 34788, 
    "queue_name": "queue_test_f02t", 
    "start_datetime_str": "2025-02-25 16:33:19", 
    "start_timestamp": 1740472399.4628778
  }, 
  {
    "code_filename": "d:/codes/funboost/test_frame/test_function_status_result_persist/test_persist.py", 
    "computer_ip": "10.0.133.57", 
    "computer_name": "LAPTOP-7V78BBO2", 
    "consumer_id": 1462882671944, 
    "consumer_uuid": "c52a8596-d632-4bac-a797-80375288f381", 
    "consuming_function": "f", 
    "hearbeat_datetime_str": "2025-02-25 17:28:36", 
    "hearbeat_timestamp": 1740475716.783336, 
    "process_id": 34788, 
    "queue_name": "queue_test_f01t", 
    "start_datetime_str": "2025-02-25 16:33:19", 
    "start_timestamp": 1740472399.4503505
  }
]
  */

                }
            });
        }








    </script>
</body>

</html>